<div class="panel panel-default">
    <div class="panel-heading">
        <h4>Register User Form</h4>
    </div>
    <div class="panel-body">
        <form name="userForm" role="form" action="" novalidate>
            <div ng-show="step==1">


                <div class="form-group">
                    <label for="">Email</label>
                    <input name="email" class="form-control" type="email" ng-model="user.email" ng-change="user.validate()"/>
                    <div class="alert alert-danger" data-ng-show="userForm.email.$invaid || user.errors.email">
                        <p data-ng-show="user.errors.email">
                            {{user.errors.email}}
                        </p>

                    </div>
                </div>

                <div class="form-group">
                    <label for="">Password</label>
                    <input class="form-control" type="password" name="password" ng-model="user.password" min="8" ng-change="user.validate()"/>
                    <div class="alert alert-danger" data-ng-show="userForm.password.$dirty && user.errors.password">
                        {{user.errors.password}}
                    </div>
                </div>
                <div>
                       <button class="btn bg-primary" data-ng-click="nextStep()">Next Step</button>
                </div>
           </div>

           <div ng-show="step==2">
               <div class="form-group">
                    <label for="">Name</label>
                    <input class="form-control" type="text" ng-model="user.name" name="name" ng-change="user.validate()" ng-min="5"/>
                   <div class="alert alert-danger" data-ng-show="userForm.name.$invalid">
                       Enter at least first and last name
                   </div>
               </div>
                <div class="form-group">
                    <label for="">Age</label>
                    <input class="form-control" type="number" ng-model="user.age" name="age" ng-change="user.validate()" min="18"/>
                    <div class="alert alert-danger" data-ng-show="userForm.age.$invalid">
                        Point age greater than 18
                    </div>
                </div>
                <div class="form-group">
                    <label for="">Sex</label>
                    <br>
                    <label class="radio-inline" data-ng-repeat="gender in genderList">
                        <input ng-model="user.sex" type="radio" name="sex" value="{{gender}}" ng-change="user.validate()"/>{{gender | uppercase}}
                    </label>
                </div>

                <div>
                    <button class="btn btn-primary" ng-click="addNew()">Register</button>
                </div>
           </div>
        </form>

    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">Users</div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="user in users">
                <p>{{user.name}}</p>
                <a class="label label-danger" data-ng-click="remove($index)"><span class="glyphicon glyphicon-minus"></span>Delete</a>
            </li>
        </ul>

    </div>
</div>